<html>
<head>
<script language="JavaScript">
<!--
 

 var selected = null;

function mouseOut(t) {  
	if (selected==null || selected != t) {
		drawTable(t,"normal");
	} else {
 		drawTable(t,"pressed");
	}
	 
} 

function mouseOver(t) { 
	

	if (selected==null || selected != t) {
		drawTable(t,"selected");
	} else {
 		drawTable(t,"pressed");
	}

}

function mouseDown(t) { 
	if(selected != null) {
		drawTable(selected  ,"normal");
	}
	selected  = t;
	drawTable(t,"pressed");
	 
}

function drawTable(t,type) { 
	name = t.id;

	document.getElementById(name +"Left").setAttribute("src","bar-images/"+type+"Left.gif");
	document.getElementById(name +"Center").setAttribute("background","bar-images/"+type+"Center.gif");
	document.getElementById(name +"Rigth").setAttribute("src","bar-images/"+type+"Right.gif"); 
}
 


//-->
</script>

<!--	
 		
-->


</head>
<body>

<a>
<table width="100%" border="0"  cellspacing="0" cellpadding="0" >
<tr>
	<td  width="50%" id="test1"   onMouseOver ="mouseOver(this);" onMouseOut ="mouseOut(this);"  onMouseDown ="mouseDown(this);"   >
 
		<table width="100%"  cellspacing="0" cellpadding="0" >
			<tr>
				<td  ><img id="test1Left" src="image/normalLeft.gif"></td>
				<td id="test1Center"   width="100%" background="image/normalCenter.gif"/>
				<td  ><img id="test1Rigth" src="image/normalRight.gif"></td>
			</tr>
		</table>
		<br/>

	</td>
	
</tr>


<tr>
	<td  width="50%" id="test2"   onMouseOver ="mouseOver(this);" onMouseOut ="mouseOut(this);"  onMouseDown ="mouseDown(this);"   >
 
		<table width="100%"  cellspacing="0" cellpadding="0" >
			<tr>
				<td  ><img id="test2Left" src="image/normalLeft.gif"></td>
				<td id="test2Center"   width="100%" background="image/normalCenter.gif"/>
				<td  ><img id="test2Rigth" src="image/normalRight.gif"></td>
			</tr>
		</table>

		<br/>

	</td>
	
</tr>


<tr>
	<td  width="50%" id="test3"   onMouseOver ="mouseOver(this);" onMouseOut ="mouseOut(this);"  onMouseDown ="mouseDown(this);"   >
 
		<table width="100%"  cellspacing="0" cellpadding="0" >
			<tr>
				<td  ><img id="test3Left" src="bar-images/normalLeft.gif"></td>
				<td id="test3Center"   width="100%" background="bar-images/normalCenter.gif"/>
				<td  ><img id="test3Rigth" src="bar-images/normalRight.gif"></td>
			</tr>
		</table>

		<br/>

	</td>
	
</tr>

<tr>
	<td  width="50%" id="test3"   onMouseOver ="mouseOver(this);" onMouseOut ="mouseOut(this);"  onMouseDown ="mouseDown(this);"   >
 
		<table width="100%"  cellspacing="0" cellpadding="0" >
			<tr>
				<td  ><img id="test3Left" src="bar-images/greyedOutLeft.gif"></td>
				<td id="test3Center"   width="100%" background="bar-images/greyedOutCenter.gif"/>
				<td  ><img id="test3Rigth" src="bar-images/greyedOutRight.gif"></td>
			</tr>
		</table>

		<br/>

	</td>
	
</tr>


 

</table>
</body>
</html>